<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>三年行动查询</div>
      </div>
    </header>
    <div class="main">
      <div class="item">
        <div class="item-name">单位</div>
        <div class="item-select" @click="openTk('单位')">
          <div class="item-select-value">{{dw_select.mc?dw_select.mc:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">任务内容</div>
        <div class="item-select" @click="openTk('任务内容')">
          <div class="item-select-value">{{rwlb_select.mc?rwlb_select.mc:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
         <div class="item">
        <div class="item-name">任务类别</div>
        <div class="item-select" @click="openTk('任务类别')">
          <div class="item-select-value">{{rwlb_select.mc?rwlb_select.mc:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
       <div class="item">
        <div class="item-name">任务年份</div>
        <div class="item-select" @click="openTk('任务年份')">
          <div class="item-select-value">{{rwlb_select.mc?rwlb_select.mc:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">完成状态</div>
        <div class="item-select" @click="openTk('完成状态')">
          <div class="item-select-value">{{wczt_select.mc?wczt_select.mc:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">落实日期</div>
        <div class="item-select">
          <div class="date-boxs">
            <div class="date-box" @click="openPopup('开始')">
              <span>{{ start_time?start_time:'请选择' }}</span>
              <img src="../../assets/images/icon-date.png">
            </div>
            <div class="date-line">—</div>
            <div class="date-box" @click="openPopup('结束')">
              <span>{{ end_time?end_time:'请选择' }}</span>
              <img src="../../assets/images/icon-date.png">
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item-name">关键字</div>
        <div class="item-select">
          <input type="text" placeholder="请输入" v-model="gjz" @click="clickValue($event)" />
        </div>
      </div>

      <div class="btn-box">
        <div class="btn radius-m" @click="next">确定</div>
      </div>

      <div class="tk" v-show="tk_type=='单位'">
        <div class="tk-bg" @click="closeTk"></div>
        <div class="tk-box">
          <div class="tk-head">
            <div class="tk-head-title">请选择</div>
            <img class="tk-head-close" src="../../assets/images/appa_r.png" >
          </div>
          <div class="tk-list">
            <div class="tk-item" v-for="(item,index) of tk_list" :class="{'tk-item-checked':item.active}" @click="checkedTk(index)">
              <span class="tk-item-value">{{item.mc}}</span>
             <!-- <img class="tk-head-closess" src="../../assets/images/tk_g_false.png" alt="" v-show="code!==1">
               <img class="tk-head-closess" src="../../assets/images/tk_g_true.png" alt="" v-if="code==1"> -->
            </div>
          </div>
          <div class="tk-btns">
            <div class="tk-btn radius-m" @click="subTk">确定</div>
          </div>
        </div>
      </div>
      
      <div class="tk" v-show="tk_type=='完成状态'">
        <div class="tk-bg" @click="closeTk"></div>
        <div class="tk-box">
          <div class="tk-head">
            <div class="tk-head-title">请选择</div>
            <img class="tk-head-close" src="../../assets/images/appa_r.png" >
          </div>
          <div class="tk-list">
            <div class="tk-item" v-for="(item,index) of tk_list" :class="{'tk-item-checked':item.active}" @click="checkedTk(index)">
              <span class="tk-item-value">{{item.mc}}</span>
            </div>
          </div>
          <div class="tk-btns">
            <div class="tk-btn radius-m" @click="subTk">确定</div>
          </div>
        </div>
      </div>
 <div class="tk" v-show="tk_type=='任务内容'">
        <div class="tk-bg" @click="closeTk"></div>
        <div class="tk-box">
          <div class="tk-head">
            <div class="tk-head-title">请选择</div>
            <img class="tk-head-close" src="../../assets/images/appa_r.png" >
          </div>
          <div class="tk-list">
            <div class="tk-item" v-for="(item,index) of tk_list" :class="{'tk-item-checked':item.active}" @click="checkedTk(index)">
              <span class="tk-item-value">{{item.name}}</span>
            </div>
          </div>
          <div class="tk-btns">
            <div class="tk-btn radius-m" @click="subTk">确定</div>
          </div>
        </div>
      </div>

      <van-popup v-model="shows"  position="bottom">
        <van-datetime-picker
          class="van-datetime-picker"
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="shows = false"
          @confirm="confirm"
        />
      </van-popup>


    </div>
       <Tabbar></Tabbar>
  </div>
</template>
<script>
  import utils from "../../assets/js/utils.js"
  import Tabbar from "../tabbar.vue";
export default {
  name: "data_map_search",
    components: {
    Tabbar
  },
  data() {
    return {
      dw_list:[],
      rwlb_list:[],
      wczt_list:[],
      tk_type:'',//显示的弹框，如果为空就隐藏弹框
      tk_list: [], //弹框列表
      userId:null,//用户id
      dw_select:[],//单位 选中的
      rwlb_select:[],//任务类别 选中的
      wczt_select:{},//完成状态 选中的
      gjz:'',//关键字
      start_time:'',
      end_time:'',
      shows: false,
      minDate: new Date(2015, 0, 1),
      maxDate: new Date(new Date().getUTCFullYear(), new Date().getMonth(), new Date().getDate()),
      currentDate: new Date(),
      nowTimeType:'',
      leibieid:'',
      zhuangtai:'',
      ts:'',
      dwids:'',
      keepAlive:true,
      code:0,
       isDisable: false
    };
  },
  methods: {
    back(){
        this.$router.back()
      this.$router.push('/snxd_tongji');
    },
    
    openPopup (type) {
      if(type=='开始'){
        this.currentDate = this.start_time;
       
      }else if(type=='结束'){

        this.currentDate = this.end_time;
     
      }else{
        return;
      }
       
      this.shows = true;
      this.nowTimeType = type;
    },
    confirm () {
      var start_time = this.start_time;
      var end_time = this.end_time;
      
      if((start_time+'').indexOf('-')>=0){
        start_time = start_time.replace(/\-/g, '/');
        
      }
      if((end_time+'').indexOf('-')>=0){
        end_time = end_time.replace(/\-/g, '/');
       
      }
      if (this.nowTimeType=='开始') {
        if(new Date(this.currentDate)>new Date(this.end_time)){
          this.$toast('起始日期必须小于截止日期');
          return;
        }else{
          this.start_time = utils.dateFormat(this.currentDate,'YYYY-MM-DD');
        }
      } else if (this.nowTimeType=='结束')  {
        if(new Date(this.currentDate)<new Date(this.start_time)){
          this.$toast('截止日期必须大于起始日期');
          return;
        }else{
          this.end_time = utils.dateFormat(this.currentDate,'YYYY-MM-DD');
          
        }
      }
      this.nowTimeType = '';
      this.shows = false;
  console.log(this.end_time)
       console.log(this.start_time)
      this.$forceUpdate();
    },
    getArrStr(list){
      var str = '';
      if(list&&list.length>0){
        list.forEach(v => {
          str+=v.mc+',';
        });
        str=str.substring(0,str.length-1);
      }
      return str;
    },
   namegetArrStr(list){
      var str = '';
      if(list&&list.length>0){
        list.forEach(v => {
          str+=v.mc+',';
        });
        str=str.substring(0,str.length-1);
      }
      return str;
    },
    
    openTk(type) {//打开弹出框
      var _this = this;

      var checked = {};
      var url = '';
      var params = {};
      if(type=='单位'){//单位
        var _list = JSON.parse(JSON.stringify(_this.dw_list));
       
        for(var n=0;n<_list.length;n++){
          
        
          if(_this.dw_list.id===_list[n].id){
            _list[n].active = true;
          }
        
        }
        _this.tk_list = _list;
        _this.tk_type = type;
        $("html").css("height","100vh");
        $("body").css("height","100vh");
        $("html").css("overflow","hidden");
        $("body").css("overflow","hidden");
        return;
      }else if(type=='任务内容'){//任务类别
        var _list = JSON.parse(JSON.stringify(_this.rwlb_list));
         
        for(var n=0;n<_list.length;n++){
          // _this.rwlb_select.forEach(v => {
          
            if(_this.rwlb_select.id===_list[n].id){
              _list[n].active = true;
            }
          // });
        }
       
        _this.tk_list = _list;
        _this.tk_type = type;
        $("html").css("height","100vh");
        $("body").css("height","100vh");
        $("html").css("overflow","hidden");
        $("body").css("overflow","hidden");
        return;
      }else if(type=='完成状态'){//完成状态
        var _list = JSON.parse(JSON.stringify(_this.wczt_list));
        for(var n=0;n<_list.length;n++){
          if(_this.wczt_select.id===_list[n].id){
            _list[n].active = true;
          }
        }
        _this.tk_list = _list;
        _this.tk_type = type;
        $("html").css("height","100vh");
        $("body").css("height","100vh");
        $("html").css("overflow","hidden");
        $("body").css("overflow","hidden");
        return;
      }
    },
    closeTk() {//关闭弹出框
      this.tk_type = "";
      this.tk_list = [];
      $("html").css("height","auto");
      $("body").css("height","auto");
      $("html").css("overflow","auto");
      $("body").css("overflow","auto");
    },
    checkedTk(index) {//弹出框选中选项
      var _this = this;
      if (_this.tk_type == "单位") {//单位
     
        if(_this.tk_list[index].active){
            
          _this.tk_list[index].active = false;
          // this.code=0
        }else{
           for(var n=0;n<_this.tk_list.length;n++){
        
            _this.tk_list[n].active = false;
            //  this.code=0
          }
           
          _this.tk_list[index].active = true;
           this.code=1
        }
      } else if (_this.tk_type == "任务内容") {//任务类别
        if(_this.tk_list[index].active){
          _this.tk_list[index].active = false;
        }else{
          for(var n=0;n<_this.tk_list.length;n++){
            _this.tk_list[n].active = false;
          }
          _this.tk_list[index].active = true;
        }
      } else if (_this.tk_type == "完成状态") {//完成状态
        if(_this.tk_list[index].active){
          _this.tk_list[index].active = false;
        }else{
          for(var n=0;n<_this.tk_list.length;n++){
            _this.tk_list[n].active = false;
          }
          _this.tk_list[index].active = true;
        }
      }
      _this.$forceUpdate();
    },
    subTk(){
      var _this = this;
      if (_this.tk_type == "单位") {//单位
        var list = {};
        _this.tk_list.forEach(v => {
          if(v.active){
            list={
              id:v.id,
              mc:v.mc
            };
          }
        });
         console.log("单位id",list)
       this.dwids=list.id
        _this.dw_select = list;
      } else if (_this.tk_type == "任务内容") {//任务类别
        var list = {};
        _this.tk_list.forEach(v => {
         
          if(v.active){
            list={
              id:v.id,
              mc:v.name
            };
           this.leibieid=list.id
          }
           
        });
          console.log("类别id",list)
            // console.log(list[0].id)
            
        _this.rwlb_select = list;
        
      } else if (_this.tk_type == "完成状态") {//完成状态
        var obj = {};
        _this.tk_list.forEach(v => {
          if(v.active){
            obj = {
              id:v.id,
              mc:v.mc
            };
          }
        });
        console.log(obj.id)
        this.zhuangtai=obj.id
        _this.wczt_select = obj;
      }
      _this.closeTk();

    },
    clickValue(e){//点击后光标移到最后
      var t = $(e.currentTarget).val();
     
      $(e.currentTarget).val("").focus().val(t);

    },
    getDwList() {
      var _this = this;
    // var userId=localStorage.getItem("userId")
    var snxd_dwid=localStorage.getItem("snxd_dwid")
      _this.dw_list = [];
        var params={
        dwId:snxd_dwid,
        userId:this.userId
      }
      _this.axios.get(_this.$global_msg.Url.host + "/ThreeYearsController/selectNextUnit",{
      	params:params
      }).then(function (data) {
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
        console.log('selectStreetAndCommunity:',data);
        if(data&&data.data){
          if(data.data.code===200){
            console.log(data)
            if(data.data.rows&&data.data.rows.length==1){
              _this.dw_list = data.data.rows
              //  _this.ts=data.data.rows[0].mc
            _this.dwids=_this.dw_list[0].id
            }else if(data.data.rows&&data.data.rows.length>0){
              _this.dw_list = data.data.rows;
            }
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('单位查询失败');
        }
      });
    },
    getRwlbList() {
      var _this = this;
      _this.rwlb_list = [];
    
      _this.axios.get(_this.$global_msg.Url.host + "/ThreeYearsController/selectThreeYearActionClass",{
      	params: {

        }
      }).then(function (data) {
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
        console.log('selectStreetAndCommunity:',data);
        if(data&&data.data){
          if(data.data.code===200){
            if(data.data.rows&&data.data.rows.length>0){
              _this.rwlb_list = data.data.rows;
             
            }
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('任务内容查询失败');
        }
      });
    },
    getWcztList() {
      var list = [
        {mc:'已落实',id:1},
        {mc:'未落实',id:0},
        {mc:'已超期',id:2}
      ];
      this.wczt_list = list;
    },
    next() {//保存
      var _this = this;
    var search={
      dwId:this.dwids,
      configId:this.leibieid,
      state:this.zhuangtai,
      beginTime:this.start_time,
      endTime:this.end_time,
      name:this.gjz
      }
      localStorage.setItem('searchs', JSON.stringify(search))
      
      this.$router.push('/snxd_sclist');
    },
    plusReady: function() {

    }
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  beforeRouteEnter(to, from, next) {
      next((vm) => {
        console.log(to)
        console.log(from)
        console.log(from.fullPath)
        if(to.fullPath=="/snxd_search"&&from.fullPath=="/snxd_list"){
              vm.getDwList();
    vm.getRwlbList();
    vm.getWcztList();
          to.meta.keepAlive=true
          
      
        }else if(to.fullPath=="/snxd_search"&&from.fullPath=="/snxd_sclist"){
             to.meta.keepAlive=false
             
              vm.getDwList();
    vm.getRwlbList();
    vm.getWcztList();
             
        }else{
           to.meta.keepAlive=false
        }
      })
      next();
    },
  mounted() {
    var _this = this;
    this.userId = localStorage.getItem("userId"); //用户id
    //初始化
    this.getDwList();
    this.getRwlbList();
    this.getWcztList();

    //物理返回
    // window.addEventListener("popstate", function(){
    //   _this.back();
    // }, false);
  },
  created() {

  }
};
</script>
<style scoped>
  #app3{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add{
    position: absolute;
    right: 0.37037rem;
    font-size: 0.388888rem;
    bottom: 0.462962rem;
  }

  .main {
    flex: 1;
    box-sizing: border-box;
    background: #fff;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  /* 圆角 */
  .radius-b{
    border-radius: 0.222222rem;
  }
  .radius-m{
    border-radius: 0.166666rem;
  }
  .radius-s{
    border-radius: 0.111111rem;
  }

  /* 表单 */
  .item{
    width: 100%;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #DDDDDD solid;
  }
  .item .item-name{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: 2rem;
    color: #000000;
    font-size: 0.388888rem;
  }
  .item .item-select{
    flex: 1;
    margin-right: 0.37037rem;
    color: #a3a3a3;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .item .item-select input{
    width: 4.629629rem;
    height: 100%;
    color: #a3a3a3;
    font-size: 0.388888rem;
    text-align: left;
  }
  .item .item-select .item-select-value{
    flex: 1;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
  .item .item-select .item-select-icon{
    margin-left: 0.222222rem;
    width: 0.453703rem;
    height: 0.611111rem;
    display: flex;
    align-items: center;
  }



  /* 按钮 */
  .btn-box{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0.37037rem;
    margin-bottom: 1.37037rem;
  }
  .btn-box .btn{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.074074rem;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
  }


  /* 弹框 */
  .tk{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tk .tk-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 31;
    background-color: rgba(0,0,0,0.4);
  }
  .tk .tk-box{
    width: 9rem;
    height: 9rem;
    background-color: #FFFFFF;
    z-index: 32;
    display: flex;
    flex-direction: column;
    border-radius: 0.222222rem;
  }

  .tk .tk-head{
    width: 100%;
    height: 1.4351851851851851rem;
    font-size: 0.388888rem;
    border-bottom: 1px #ddd solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tk .tk-head .tk-head-title{
    margin-left: 0.37037rem;
    flex: 1;
    height: 1.4351851851851851rem;
    display: flex;
    align-items: center;
  }
  .tk .tk-head .tk-head-close{
    margin-right: 0.37037rem;
    width: 0.444444rem;
    height: 0.444444rem;
  }
.tk-head-closess{
   margin-right: 0.37037rem;
    width: 0.344444rem;
    height: 0.344444rem;
}

  .tk .tk-list{
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }
  .tk .tk-item{
    width: 100%;
    height: 1.3888888888888888rem;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tk .tk-item .tk-item-value{
    margin-left: 0.37037rem;
  }
  .tk .tk-list .tk-item-checked{
    color: #2a6cfe;
  }
  .small-tk-item-value{
    margin-left: 0.925925rem !important;
  }

  .tk .tk-btns{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0.37037rem;
    margin-bottom: 0.37037rem;
  }
  .tk .tk-btns .tk-btn{
    margin-left: 1.851851rem;
    margin-right: 1.851851rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.074074rem;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
  }


  .date-boxs{
    width: 100%;
    display: flex;
    align-items: center;
  }
  .date-box{
    width: 3rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .date-box img{
    width: 0.462963rem;
    height: 0.462963rem;
    margin-left: 0.092592rem;
    margin-right: 0.092592rem;
  }
  .date-line{
    flex: 1;
    text-align: center;
  }
</style>
